<!-- <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
      }
      ul li {
        list-style: none;
      }

      .chart-b{
        z-index: 999;
        width: 250px;
        height: 250px;
        position: fixed;
        top:-5px;
        left:10px;
        bottom: 400px;
      }
      
      .drawing-panel {
        z-index: 999;
        position: fixed;
        bottom: 0rem;
        margin-left: 1rem;
        padding: 1rem 1rem;
        border-radius: 0.25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
      }
      .btn {
        width: 75px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border: 1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
      }
      .btn.current {
        background-color: rgba(27, 142, 236, 1);
        color: #fff;
      }
      .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
      }
	  .BMap_cpyCtrl {
        display: none;
      }
      .anchorBL {
        display: none;
      }
    </style>
    <script
      type="text/javascript"
      src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=H4lKfPDUeZHxNwJeg8hjOKNhXYWSzPHS"
    ></script>
    <!-- <script
    type="text/javascript"
    src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=ifE0YvqOw4HOjgIyFUO7gP5XmBdr1sWV"
  ></script> -->
    <!-- <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"
    ></script> -->
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    
    <!-- <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/bmap.min.js"
    ></script> -->
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/extension/bmap.min.js"></script>

    <script
      type="text/javascript"
      src="../jquery/jquery-2.1.1.min.js"
    ></script>
    
    <title>地球模式</title>
  </head>
  <body>
    <div id="allmap"></div>
    <div id ="J_chart" class="chart-b" ></div>
  </body>
  <ul class="drawing-panel" style="z-index: 99;">
    <li id="biaozhunditu" class="night btn">标准地图</li>
    <li id="weixinditu" class="night btn current">卫星地图</li></li>
  </ul>
  
</html>
<script type="text/javascript">
  // GL版命名空间为BMapGL
  var map = new BMapGL.Map("allmap"); // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(103.715949, 29.075551), 17.5); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  map.setMapType(BMAP_NORMAL_MAP); // 地球模式
  map.setHeading(0);
  map.setTilt(0);
  var mapType3d = new BMapGL.NavigationControl3D();
  // 创建点标记
  var point1 = new BMapGL.Point(103.714949, 29.076251)
  var point2 =new BMapGL.Point(103.715249, 29.076051)
  var marker1 = new BMapGL.Marker(point1);
  var marker2 = new BMapGL.Marker(point2);
  // 在地图上添加点标记
  map.addOverlay(marker1);
  map.addOverlay(marker2);


  // 信息窗口1
  var opts1 = {
	    width : 200,     // 信息窗口宽度
	    height: 70,     // 信息窗口高度
	    title : "监测点一" , // 信息窗口标题
	    message:"监测点一"
	}
	var infoWindow1 = new BMapGL.InfoWindow("点击监测点一跳转到对应的数据监测页面", opts1);  // 创建信息窗口对象 
  // 信息窗口2
  var opts2 = {
	    width : 200,     // 信息窗口宽度
	    height: 70,     // 信息窗口高度
	    title : "监测点二" , // 信息窗口标题
	    message:"监测点二"
	}
	var infoWindow2 = new BMapGL.InfoWindow("点击监测点二跳转到对应的数据监测页面", opts2);  // 创建信息窗口对象 


  

  // 监听点事件
  marker1.addEventListener("click", function() {
    //alert("您点击了标注");
    // window.open("http://localhost:8001/#/generator-displacementCharts?stationId=1");
    window.open("http://121.196.24.130/#/generator-displacementCharts?stationId=1");
  });
  marker2.addEventListener("click", function() {
    //alert("您点击了标注");
    // window.open("http://localhost:8001/#/generator-displacementCharts?stationId=2");
    window.open("http://121.196.24.130/#/generator-displacementCharts?stationId=2");
  });
  marker1.addEventListener("mouseover", function() {
    //console.log("移入");
    //map.addOverlay(label);
    map.openInfoWindow(infoWindow1, point1); //开启信息窗口
  });
  marker1.addEventListener("mouseout", function() {
    //console.log("移出去");
    //map.removeOverlay(label);
    map.closeInfoWindow(infoWindow1, point1); //开启信息窗口
  });
  marker2.addEventListener("mouseover", function() {
    //console.log("移入");
    //map.addOverlay(label);
    map.openInfoWindow(infoWindow2, point2); //开启信息窗口
  });
  marker2.addEventListener("mouseout", function() {
    //console.log("移出去");
    //map.removeOverlay(label);
    map.closeInfoWindow(infoWindow2, point2); //开启信息窗口
  });

  // 标准地图
  function setCustomStyle1() {
	document.getElementById('biaozhunditu').classList.add("current")
	document.getElementById('weixinditu').classList.remove("current");
	map.setMapType(BMAP_NORMAL_MAP);
	map.addControl(mapType3d);
  	// map.setHeading(64.5);
  	// map.setTilt(73);
  }
	// 地球模式
  function setCustomStyle2() {
	document.getElementById('weixinditu').classList.add("current")
	document.getElementById('biaozhunditu').classList.remove("current");
	map.setMapType(BMAP_EARTH_MAP);
	map.removeControl(mapType3d);
	// map.setHeading(0);
  	// map.setTilt(0);
  }
  // 给按钮绑定事件
  document.getElementById("biaozhunditu").onclick = setCustomStyle1;
  document.getElementById("weixinditu").onclick = setCustomStyle2;

  var value = 0;
  $.ajax({
      //http://ip:端口号/工程名/Servlet程序名(根据web.xml中定义的来)
      url:"http://121.196.24.130:8080/renren-fast/generator/error/get/ok/and/errors",
      type:"GET",
      //这里的data其实就是请求到的参数
      data: {
          token: "fe3b07d3f5aca1932f501f881bb41f0c"
      },
      success:function (response){
          // .html等价于 innerHTML
          // value = response.ok*2.5;
          value = 40*2.5;
      },
      async:false,
      //这里使用json，他会自动帮我们转换成json类型，就不需要我们再用JSON.parse()去解析啦
      dataType:"json"
  });


  let angle = 0; //角度，用来做简单的动画效果的
  
  var timerId;
  var optionEcharts = {
    backgroundColor: "",
    title: [
      {
        text: "{a|" + value + "}{c|%}",
        x: "center",
        y: "52%",
        textStyle: {
          rich: {
            a: {
              fontSize: 18,
              color: "#5599FF"
            },

            c: {
              fontSize: 18,
              color: "#5599FF"
              // padding: [5,0]
            }
          }
        }
      },
      {
        text: "传感器",
        x: "center",
        y: "39%",
        textStyle: {
          fontSize: "14",
          color: "#000000",
          fontFamily: "DINAlternate-Bold, DINAlternate",
          foontWeight: "600"
        }
      },
      {
        text: "上线率",
        x: "center",
        y: "45%",
        textStyle: {
          fontSize: "14",
          color: "#000000",
          fontFamily: "DINAlternate-Bold, DINAlternate",
          foontWeight: "600"
        }
      }
    ],

    series: [
      // 紫色
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((0 + angle) * Math.PI) / 180,
              endAngle: ((90 + angle) * Math.PI) / 180
            },
            style: {
              stroke: "#8383FA",
              fill: "transparent",
              lineWidth: 1.5
            },
            silent: true
          };
        },
        data: [0]
      },
      {
        name: "ring5", //紫点
        type: "custom",
        coordinateSystem: "none",
        renderItem: function(params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
          let point = getCirlPoint(x0, y0, r, 90 + angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: "#8450F9", //绿
              fill: "#8450F9"
            },
            silent: true
          };
        },
        data: [0]
      },
      // 蓝色

      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((180 + angle) * Math.PI) / 180,
              endAngle: ((270 + angle) * Math.PI) / 180
            },
            style: {
              stroke: "#4386FA",
              fill: "transparent",
              lineWidth: 1.5
            },
            silent: true
          };
        },
        data: [0]
      },
      {
        name: "ring5", // 蓝色
        type: "custom",
        coordinateSystem: "none",
        renderItem: function(params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
          let point = getCirlPoint(x0, y0, r, 180 + angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: "#4386FA", //绿
              fill: "#4386FA"
            },
            silent: true
          };
        },
        data: [0]
      },

      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((270 + -angle) * Math.PI) / 180,
              endAngle: ((40 + -angle) * Math.PI) / 180
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5
            },
            silent: true
          };
        },
        data: [0]
      },
      // 橘色

      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((90 + -angle) * Math.PI) / 180,
              endAngle: ((220 + -angle) * Math.PI) / 180
            },
            style: {
              stroke: "#FF8E89",
              fill: "transparent",
              lineWidth: 1.5
            },
            silent: true
          };
        },
        data: [0]
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function(params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
          let point = getCirlPoint(x0, y0, r, 90 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: "#FF8E89", //粉
              fill: "#FF8E89"
            },
            silent: true
          };
        },
        data: [0]
      },
      {
        name: "ring5", //绿点
        type: "custom",
        coordinateSystem: "none",
        renderItem: function(params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
          let point = getCirlPoint(x0, y0, r, 270 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: "#0CD3DB", //绿
              fill: "#0CD3DB"
            },
            silent: true
          };
        },
        data: [0]
      },
      {
        name: "",
        type: "pie",
        radius: ["52%", "40%"],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center"
          }
        },
        data: [
          {
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: "#A098FC" // 0% 处的颜色
                    },
                    {
                      offset: 0.3,
                      color: "#4386FA" // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#4FADFD" // 0% 处的颜色
                    },
                    {
                      offset: 0.8,
                      color: "#0CD3DB" // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#646CF9" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          },
          {
            value: 100 - value,
            name: "",
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "#173164"
              }
            }
          }
        ]
      },
      {
        name: "",
        type: "pie",
        radius: ["32%", "36%"],
        silent: true,
        clockwise: true,
        startAngle: 270,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center"
          }
        },
        data: [
          {
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00EDF3" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#646CF9" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          },
          {
            value: 100 - value,
            name: "",
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "#173164"
              }
            }
          }
        ]
      }
    ]
  };
  //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
  function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
    return {
      x: x1,
      y: y1
    };
  }

  var chartPie = echarts.init(document.getElementById("J_chart"));
  chartPie.setOption(optionEcharts);
  



</script> -->
